<template>
<div>
   <!-- 模态框 -->
   <el-dialog
      title="文章详情"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
      <div class="artinfo" v-html="info">
         
      </div>
    </el-dialog>
<!-- 审核模态框 -->
    <el-dialog
      title="审核"
      :visible.sync="dialogVisibleShenhe"
      width="50%"
      :before-close="handleClose">
      
      <el-radio v-model="checkresult" label="1" border>已审核</el-radio>
      <el-radio v-model="checkresult" label="2" border>未通过</el-radio>
       <el-button type="primary" @click="subcheck">确定</el-button>
    </el-dialog>



   <!-- 新增按钮 -->
   <div class="header">
      <!-- <el-button type="primary" @click="addUser" >
       + 新增
      </el-button> -->

       <el-button type="danger" icon="el-icon-delete" @click="buchDelete">
         批量删除
       </el-button>
      <!-- <el-button @click="toggleSelection(tableData[2],tableData[3])">切换二三行转态</el-button> -->

      <div class="search"> 
        <el-button @click="getArticleTitle(1,10)" icon="el-icon-search" type="primary">查询</el-button>
       <!-- 搜索框 -->
      <el-input placeholder="请输入文章标题信息查询" 
       prefix-icon="el-icon-search" 
       v-model="titleinput" clearable>
      </el-input>
      <!-- 状态查询 -->
      <el-select v-model="value" placeholder="状态查询" @change="getByStatus">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value" >
        </el-option>
      </el-select>

      </div>
      
   </div>


 <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    max-height="490"
    stripe
    @select="getselect" @select-all="getselectall">
   
    <el-table-column
      type="selection"
      width="45">
    </el-table-column>

    <el-table-column
      prop="article.title"
      label="标题"
      width="140">
    </el-table-column>

    <el-table-column
      prop="article.cover"
      label="封面"
      width="120">
      <template slot-scope="scope">
       <el-image
      style="width: 100px; height: 60px"
      :src="scope.row.article.cover"
      :fit="fit"></el-image>
      </template>
    </el-table-column>

    <el-table-column
      prop="nickname"
      label="作者"
      empty-text="暂无数据"
      width="110"
      >
    </el-table-column>

    <el-table-column
      prop="username"
      label="用户账号"
      width="100">
    </el-table-column>

    <el-table-column
      prop="article.likes"
      label="点赞"
      width="80">
    </el-table-column>

    <el-table-column
      prop="article.comments"
      label="评论"
      width="80">
    </el-table-column>

    <el-table-column
      prop="article.shares"
      label="收藏"
      width="80">
    </el-table-column>

    <el-table-column
      prop="article.createtime"
      label="发布时间"
      width="140">
    </el-table-column>

    <!-- <el-table-column
      prop="updatetime"
      label="修改时间"
      width="120">
    </el-table-column> -->
    
    <el-table-column
      prop="article.status"
      label="状态"
      width="80">
      <template slot-scope="scope">
        <el-tag v-show="scope.row.article.status == 0">未审核</el-tag>
        <el-tag type="success" v-show="scope.row.article.status == 1">已审核</el-tag>
        <el-tag type="danger" v-show="scope.row.article.status == 2">未通过</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini"  @click="check(scope.$index, scope.row)"
         v-show="scope.row.article.status == 0 || scope.row.article.status == 2">审核</el-button>
          
       <el-button size="mini" type="primary" @click="seeInfo(scope.$index, scope.row)">详情</el-button>
        
      <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页插件 -->
  <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 25]"
      :page-size="pageSize"
      :page-count="paegcount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalinfo">
    </el-pagination>
 
</div>
</template>

<script>
import reqArt from "@/api/index"
  export default {
    mounted(){
      //查询文章
      this.pageSelect(1,10,3)

     var imgs = document.querySelectorAll(".artinfo img")
     imgs.forEach(it=>{
      console.log(it.src); 

     })

    },
    data() {
      return {
        tableData: [],
        //根据转态分类查询
          status:3,//3代表所有一般情况
         //当前页面
          currentPage:'',
          //总记录数
          totalinfo:'',
         //每条页数
         pageSize:10,
         //总页数
         pageCount:'',
         //转态查询
         options:[{
            value:3,
            label:'所有'
         },{
            value:0,
            label:'未审核'
         },
          {
            value:1,
            label:'已审核'
         },{
            value:2,
            label:'未通过'
         }],
         value:3,
         //模态框是否可见
          dialogVisible:false,
          dialogVisibleShenhe:false,
          //控制是否是新增或者是修改,默认是新增
           //模态框数据
          info:'',
          //审核结果
          articleId:'',
          checkresult:'',
          //标题模糊查询
          titleinput:'',
          //批量删除
          ids:[],
       
      }
    },
    methods: {
      //分页查询
    async pageSelect(page,size,status,liketitle){
       const res = await reqArt.getArticles(page,size,status,liketitle);
     if(res.code !== 200){
      alert(res.message)
     }
      this.tableData=res.data.records;
      this.totalinfo = res.data.total
      this.currentPage = res.data.current;    
      this.pageCount = res.data.pages
     },
       
      //删除
      handleDelete(index, row) {
      this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await reqArt.deleteArticle(row.article.id);
          this.tableData.splice(index,1)
          if(res.code == 200){
               this.$message({
            type: 'success',
            message: '删除成功!'
          });
          }else this.$message({
            type: 'info',
            message: '删除失败!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //批量删除
      buchDelete(){
        this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await reqArt.deleteBuchArticles(this.ids);
          if(res.code == 200){
               this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //在查询一次就可以了
          this.pageSelect(this.currentPage,this.pageSize,this.value,this.titleinput)
          }else this.$message({
            type: 'info',
            message: '删除失败!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      
      //当页面尺寸变换时
      handleSizeChange(val){
        this.pageSelect(this.currentPage,val,this.value,this.titleinput)
      },
      //当当前页面变换时
      handleCurrentChange(val){
        this.pageSelect(val,this.pageSize,this.value,this.titleinput)
      },
        //查看详情
     async seeInfo(index, row){
         //模态框可见
         this.dialogVisible = true
         //文章路径
          const path = row.article.content;
          const txt = await reqArt.getTxt(path)
          this.info= txt
        },
        //审核
        async check(index,row){
           this.dialogVisibleShenhe = true
           this.articleId = row.article.id
        },
        //提交审核结果
       async subcheck(){
          const res = await reqArt.checkArticle(this.articleId,parseInt(this.checkresult))
           if(res.code==200){
            this.$message('已修改状态')
            this.dialogVisibleShenhe = false
            if(this.value!=3){
             this.tableData.forEach(item=>{
              if(item.article.id == this.articleId) item.article.status = this.checkresult;
            })
           this.tableData = this.tableData.filter(item=>item.article.status == this.value)
            }
           if(this.value==3){
               this.tableData.forEach(item=>{
              if(item.article.id == this.articleId) item.article.status = this.checkresult;
            })
           }
           }
           else{
            this.$message(res.message)
           }
        },
        //根据状态查询文章
      getByStatus(){
         this.pageSelect(1,10,this.value,this.titleinput)
      },
      //根据标题模糊查询
      async getArticleTitle(page,size){
       this.pageSelect(page,size,this.status,this.titleinput)
      },
      //选择框
      getselect(selection){
        const idss =[]
        selection.forEach(item=>{
          idss.push(item.article.id)
        })
        this.ids = idss
      },
      //全选
      getselectall(selection){
        const idss =[]
        selection.forEach(item=>{
          idss.push(item.article.id)
        })
        this.ids = idss
      }
    }
  }
</script>
<style lang="less">
 .header{
      display: flex;
      .el-input{
       
         width:200px
      }
      .search{
        margin-left: 350px;
       
      }
   }
.el-select{
  margin-left: 50px;
  // margin-bottom: 20px;
}
// .content{
//   // p{
//   //   width:300px;
//   // }
//   img{
//     width:500px;
//     height:200px;

//   }
// }
.artinfo{
// img{
//   width: ;
// }
p{
  width: 500px;
}
pre{
  display: block;
  height: 500px;
  width:500px
}
}
</style>